<template>
  <div class="footerInfo">
    <div class="link_info">
      <el-tooltip :content="aboutInfo" placement="top" effect="light">
        <span class="link_info_item">关于</span>
      </el-tooltip>
      <el-tooltip :content="privacyInfo" placement="top" effect="light">
        <span class="link_info_item">隐私</span>
      </el-tooltip>
      <el-tooltip :content="articleInfo" placement="top" effect="light">
        <span class="link_info_item">条款</span>
      </el-tooltip>
    </div>
    <div class="about">
      <span>Skygray and Boom @2022 微信小程序高校大赛作品</span>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "FooterInfo",
  setup() {
    //帮助信息
    const aboutInfo: string = `
      指导老师:骆丽华，
      学生:梁广寓、陈康鹏`;
    //隐私信息
    const privacyInfo: string = `本项目仅供比赛使用`;
    //条款信息
    const articleInfo: string = `本项目仅供比赛使用`;

    return {
      aboutInfo,
      privacyInfo,
      articleInfo,
    };
  },
};
</script>

<style scoped>
.footerInfo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 15%;
  font-size: 0.9rem;
  color: #606266;
}
.link_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 15%;
  height: 33px;
}
.link_info_item {
  cursor: pointer;
  width: 50px;
  height: 20px;
  line-height: 20px;
  color: #606266;
}
.about {
  width: 60%;
  height: 43px;
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>